import classNames from 'classnames'
import React, { ReactNode } from 'react'
import styels from './index.module.scss'

interface Props
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  Errmsg?: string
  extra?: ReactNode
  className?: string
}

export default function Input({ Errmsg, extra, className, ...rest }: Props) {
  return (
    <div className={styels.root}>
      <input {...rest} className={classNames('input', className)} />
      {Errmsg ? <div className="validate">{Errmsg}</div> : null}
      {extra ? <div className="extra">{extra}</div> : extra}
    </div>
  )
}
